<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .father {
                display: grid;
                background-color: #ccc;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: 200px 200px;
                grid-row-gap: 20px;
                grid-column-gap: 10px;
                padding: 0 10px;

                /* justify-items: start; */
                /* align-items: center; */
            }
            .son:nth-of-type(1) {
                background-color: red;
                display: grid;
                justify-items: center;
                align-items: center;
            }
            .son:nth-of-type(2) {
                background-color: green;
            }
            .son:nth-of-type(3) {
                background-color: blue;
            }
            .son:nth-of-type(4) {
                background-color: purple;
            }
            .son:nth-of-type(5) {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">1</div>
            <div class="son">2</div>
            <div class="son">3</div>
            <div class="son">4</div>
            <div class="son">5</div>
            <div class="son">6</div>
        </div>
    </body>
</html>
